{% extends "base.html" %}

{% block title %}{{ resource.title }} - 学习资源详情 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .resource-detail-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        border-radius: 0.5rem;
        margin-bottom: 2rem;
    }
    .resource-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    .resource-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .resource-meta-item {
        display: flex;
        align-items: center;
    }
    .resource-meta-item i {
        margin-right: 0.5rem;
    }
    .resource-actions {
        display: flex;
        gap: 1rem;
    }
    .resource-content {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    .resource-description {
        margin-bottom: 2rem;
        line-height: 1.8;
    }
    .resource-details {
        margin-bottom: 2rem;
    }
    .resource-details h3 {
        margin-bottom: 1rem;
        font-size: 1.25rem;
        color: #495057;
    }
    .detail-item {
        display: flex;
        margin-bottom: 0.75rem;
    }
    .detail-label {
        font-weight: 600;
        width: 150px;
        color: #6c757d;
    }
    .detail-value {
        flex: 1;
        color: #495057;
    }
    .resource-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 2rem;
    }
    .tag {
        padding: 0.375rem 0.75rem;
        border-radius: 1.5rem;
        background-color: #e9ecef;
        color: #495057;
        font-size: 0.875rem;
    }
    .resource-preview {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
        text-align: center;
    }
    .preview-placeholder {
        font-size: 4rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    .preview-text {
        color: #6c757d;
        font-size: 0.875rem;
    }
    .comment-section {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .comment-section h3 {
        margin-bottom: 1.5rem;
        font-size: 1.25rem;
        color: #495057;
        display: flex;
        align-items: center;
    }
    .comment-section h3 i {
        margin-right: 0.5rem;
    }
    .comment-form {
        margin-bottom: 2rem;
    }
    .comment-form textarea {
        width: 100%;
        min-height: 100px;
        padding: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        resize: vertical;
        margin-bottom: 1rem;
    }
    .comment-form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .comment-rating {
        display: flex;
        align-items: center;
    }
    .comment-rating label {
        margin-right: 0.5rem;
        color: #6c757d;
    }
    .comment-rating i {
        color: #ffc107;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .comment-rating i:hover {
        transform: scale(1.2);
    }
    .comments-list {
        space-y: 1.5rem;
    }
    .comment-item {
        border-bottom: 1px solid #f1f3f5;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .comment-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }
    .comment-user-info {
        display: flex;
        align-items: center;
    }
    .comment-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin-right: 0.75rem;
        font-weight: 600;
    }
    .comment-username {
        font-weight: 600;
        color: #495057;
    }
    .comment-time {
        color: #6c757d;
        font-size: 0.875rem;
    }
    .comment-rating-display {
        display: flex;
        margin-bottom: 0.75rem;
    }
    .comment-rating-display i {
        color: #ffc107;
        margin-right: 0.125rem;
    }
    .comment-content {
        color: #495057;
        line-height: 1.6;
    }
    .related-resources {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    .related-resources h3 {
        margin-bottom: 1.5rem;
        font-size: 1.25rem;
        color: #495057;
    }
    .related-resource-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border-radius: 0.25rem;
        transition: background-color 0.2s;
        margin-bottom: 0.5rem;
    }
    .related-resource-item:hover {
        background-color: #f8f9fa;
    }
    .related-resource-item:last-child {
        margin-bottom: 0;
    }
    .related-resource-icon {
        width: 36px;
        height: 36px;
        border-radius: 0.25rem;
        background-color: #007bff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        margin-right: 1rem;
        font-size: 1rem;
    }
    .related-resource-info {
        flex: 1;
    }
    .related-resource-title {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }
    .related-resource-meta {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .downloads-chart {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    .downloads-chart h3 {
        margin-bottom: 1.5rem;
        font-size: 1.25rem;
        color: #495057;
    }
    .report-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }
    .report-modal-content {
        background-color: white;
        border-radius: 0.5rem;
        padding: 2rem;
        width: 90%;
        max-width: 500px;
    }
    .report-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    .report-modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #495057;
    }
    .report-modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #6c757d;
        cursor: pointer;
    }
    .report-modal-body {
        margin-bottom: 1.5rem;
    }
    .report-reason {
        margin-bottom: 1rem;
    }
    .report-reason label {
        display: block;
        margin-bottom: 0.5rem;
        color: #495057;
    }
    .report-reason select {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }
    .report-description {
        margin-bottom: 1rem;
    }
    .report-description label {
        display: block;
        margin-bottom: 0.5rem;
        color: #495057;
    }
    .report-description textarea {
        width: 100%;
        min-height: 100px;
        padding: 0.5rem;
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
        resize: vertical;
    }
    .report-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- 资源详情头部 -->
<div class="resource-detail-header">
    <div class="container">
        <h1 class="resource-title">{{ resource.title }}</h1>
        <div class="resource-meta">
            <div class="resource-meta-item">
                <i class="fa fa-user-o"></i>
                <span>上传者：{{ resource.uploader.username }}</span>
            </div>
            <div class="resource-meta-item">
                <i class="fa fa-calendar-o"></i>
                <span>上传时间：{{ resource.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
            </div>
            <div class="resource-meta-item">
                <i class="fa fa-download"></i>
                <span>下载次数：{{ resource.downloads }}</span>
            </div>
            <div class="resource-meta-item">
                <i class="fa fa-eye"></i>
                <span>浏览次数：{{ resource.views }}</span>
            </div>
            <div class="resource-meta-item">
                <i class="fa fa-star"></i>
                <span>评分：{{ resource.rating }}</span>
            </div>
        </div>
        <div class="resource-actions">
            <a href="{{ url_for('download_resource', id=resource.id) }}" class="btn btn-success btn-lg">
                <i class="fa fa-download mr-2"></i>立即下载
            </a>
            {% if current_user.is_authenticated %}
            <button class="btn btn-secondary btn-lg">
                <i class="fa fa-bookmark-o mr-2"></i>收藏资源
            </button>
            <button class="btn btn-primary btn-lg">
                <i class="fa fa-share-alt mr-2"></i>分享资源
            </button>
            {% else %}
            <a href="{{ url_for('login') }}" class="btn btn-secondary btn-lg">
                <i class="fa fa-bookmark-o mr-2"></i>收藏资源
            </a>
            <button class="btn btn-primary btn-lg">
                <i class="fa fa-share-alt mr-2"></i>分享资源
            </button>
            {% endif %}
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 左侧主内容区 -->
        <div class="col-lg-8">
            <!-- 资源内容区 -->
            <div class="resource-content">
                <div class="resource-description">
                    <h2 class="mb-3">资源描述</h2>
                    <p>{{ resource.description }}</p>
                </div>
                
                <div class="resource-tags">
                    <span class="font-semibold mr-2">标签：</span>
                    {% for tag in resource.tags.split(',') %}
                    <span class="tag">{{ tag }}</span>
                    {% endfor %}
                </div>
                
                <div class="resource-details">
                    <h3>资源详情</h3>
                    <div class="detail-item">
                        <div class="detail-label">资源类型</div>
                        <div class="detail-value">
                            {% if resource.type == 'ppt' %}PPT课件
                            {% elif resource.type == 'pdf' %}PDF文档
                            {% elif resource.type == 'doc' %}Word文档
                            {% elif resource.type == 'excel' %}Excel表格
                            {% elif resource.type == 'video' %}视频教程
                            {% elif resource.type == 'audio' %}音频资源
                            {% elif resource.type == 'code' %}代码文件
                            {% else %}其他资源
                            {% endif %}
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">文件大小</div>
                        <div class="detail-value">{{ resource.file_size }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">文件格式</div>
                        <div class="detail-value">{{ resource.file_extension | upper }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">学科分类</div>
                        <div class="detail-value">{{ resource.subject }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">适用年级</div>
                        <div class="detail-value">{{ resource.grade }}</div>
                    </div>
                    <div class="detail-item">
                        <div class="detail-label">关联课程</div>
                        <div class="detail-value">
                            {% if resource.related_course %}
                            <a href="{{ url_for('course_detail', id=resource.related_course.id) }}">{{ resource.related_course.name }}</a>
                            {% else %}
                            无
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- 资源预览区 -->
                <div class="resource-preview">
                    <div class="preview-placeholder">
                        {% if resource.type == 'ppt' %}
                            <i class="fa fa-file-powerpoint-o"></i>
                        {% elif resource.type == 'pdf' %}
                            <i class="fa fa-file-pdf-o"></i>
                        {% elif resource.type == 'doc' %}
                            <i class="fa fa-file-word-o"></i>
                        {% elif resource.type == 'excel' %}
                            <i class="fa fa-file-excel-o"></i>
                        {% elif resource.type == 'video' %}
                            <i class="fa fa-file-video-o"></i>
                        {% elif resource.type == 'audio' %}
                            <i class="fa fa-file-audio-o"></i>
                        {% elif resource.type == 'code' %}
                            <i class="fa fa-file-code-o"></i>
                        {% else %}
                            <i class="fa fa-file-o"></i>
                        {% endif %}
                    </div>
                    <p class="preview-text">此资源不支持在线预览，请下载后查看</p>
                </div>
            </div>
            
            <!-- 评论区 -->
            <div class="comment-section">
                <h3><i class="fa fa-comments-o mr-2"></i>评论与评价 ({{ comments|length }})</h3>
                
                <!-- 评论表单 -->
                {% if current_user.is_authenticated %}
                <div class="comment-form">
                    <textarea placeholder="写下你的评价或疑问..." id="comment-text"></textarea>
                    <div class="comment-form-actions">
                        <div class="comment-rating" id="comment-rating">
                            <label>评分：</label>
                            <i class="fa fa-star-o" data-rating="1"></i>
                            <i class="fa fa-star-o" data-rating="2"></i>
                            <i class="fa fa-star-o" data-rating="3"></i>
                            <i class="fa fa-star-o" data-rating="4"></i>
                            <i class="fa fa-star-o" data-rating="5"></i>
                        </div>
                        <button class="btn btn-primary" id="submit-comment">提交评论</button>
                    </div>
                </div>
                {% else %}
                <div class="alert alert-info" role="alert">
                    登录后即可发表评论和评价
                </div>
                {% endif %}
                
                <!-- 评论列表 -->
                <div class="comments-list">
                    {% if comments %}
                        {% for comment in comments %}
                        <div class="comment-item">
                            <div class="comment-header">
                                <div class="comment-user-info">
                                    <div class="comment-avatar">{{ comment.user.username[0] }}</div>
                                    <div>
                                        <div class="comment-username">{{ comment.user.username }}</div>
                                        <div class="comment-time">{{ comment.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-rating-display">
                                {% for i in range(5) %}
                                    {% if i < comment.rating %}
                                        <i class="fa fa-star"></i>
                                    {% else %}
                                        <i class="fa fa-star-o"></i>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <div class="comment-content">{{ comment.content }}</div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center py-5">
                            <p class="text-gray-500">暂无评论，来发表第一条评论吧！</p>
                        </div>
                    {% endif %}
                </div>
                
                <!-- 分页控制 -->
                {% if comments_pagination and comments_pagination.pages > 1 %}
                <div class="pagination mt-4">
                    <nav aria-label="评论分页">
                        <ul class="pagination">
                            {% if comments_pagination.has_prev %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ comments_pagination.prev_num }}" aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            {% endif %}
                            
                            {% for page_num in comments_pagination.iter_pages() %}
                            {% if page_num == comments_pagination.page %}
                            <li class="page-item active">
                                <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                            </li>
                            {% else %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                            </li>
                            {% endif %}
                            {% endfor %}
                            
                            {% if comments_pagination.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ comments_pagination.next_num }}" aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- 右侧边栏 -->
        <div class="col-lg-4">
            <!-- 资源下载统计图表 -->
            <div class="downloads-chart">
                <h3>下载统计</h3>
                <canvas id="downloadsChart" height="200"></canvas>
            </div>
            
            <!-- 相关资源 -->
            <div class="related-resources">
                <h3>相关资源</h3>
                {% if related_resources %}
                    {% for related_resource in related_resources %}
                    <a href="{{ url_for('resource_detail', id=related_resource.id) }}" class="related-resource-item">
                        <div class="related-resource-icon">
                            {% if related_resource.type == 'ppt' %}
                                <i class="fa fa-file-powerpoint-o"></i>
                            {% elif related_resource.type == 'pdf' %}
                                <i class="fa fa-file-pdf-o"></i>
                            {% elif related_resource.type == 'doc' %}
                                <i class="fa fa-file-word-o"></i>
                            {% elif related_resource.type == 'excel' %}
                                <i class="fa fa-file-excel-o"></i>
                            {% elif related_resource.type == 'video' %}
                                <i class="fa fa-file-video-o"></i>
                            {% elif related_resource.type == 'audio' %}
                                <i class="fa fa-file-audio-o"></i>
                            {% elif related_resource.type == 'code' %}
                                <i class="fa fa-file-code-o"></i>
                            {% else %}
                                <i class="fa fa-file-o"></i>
                            {% endif %}
                        </div>
                        <div class="related-resource-info">
                            <div class="related-resource-title">{{ related_resource.title }}</div>
                            <div class="related-resource-meta">
                                <span>{{ related_resource.uploader.username }} · {{ related_resource.downloads }}次下载</span>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-5">
                        <p class="text-gray-500">暂无相关资源</p>
                    </div>
                {% endif %}
            </div>
            
            <!-- 举报按钮 -->
            {% if current_user.is_authenticated %}
            <div class="text-center mt-4">
                <button class="btn btn-danger btn-block" id="report-resource">
                    <i class="fa fa-flag-o mr-2"></i>举报资源
                </button>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 举报资源模态框 -->
<div class="report-modal" id="report-modal">
    <div class="report-modal-content">
        <div class="report-modal-header">
            <h3 class="report-modal-title">举报资源</h3>
            <button class="report-modal-close" id="close-report-modal">&times;</button>
        </div>
        <div class="report-modal-body">
            <div class="report-reason">
                <label for="report-reason">举报原因：</label>
                <select id="report-reason">
                    <option value="spam">垃圾内容</option>
                    <option value="copyright">侵犯版权</option>
                    <option value="pornography">色情内容</option>
                    <option value="violence">暴力内容</option>
                    <option value="hate">仇恨言论</option>
                    <option value="misinformation">虚假信息</option>
                    <option value="other">其他原因</option>
                </select>
            </div>
            <div class="report-description">
                <label for="report-description">详细说明（选填）：</label>
                <textarea id="report-description" placeholder="请详细描述您举报的原因..."></textarea>
            </div>
        </div>
        <div class="report-modal-footer">
            <button class="btn btn-secondary" id="cancel-report">取消</button>
            <button class="btn btn-danger" id="submit-report">提交举报</button>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 评论评分功能
    const ratingStars = document.querySelectorAll('#comment-rating i');
    let selectedRating = 0;
    
    ratingStars.forEach(star => {
        star.addEventListener('click', function() {
            const rating = parseInt(this.getAttribute('data-rating'));
            selectedRating = rating;
            
            ratingStars.forEach((s, index) => {
                if (index < rating) {
                    s.classList.remove('fa-star-o');
                    s.classList.add('fa-star');
                } else {
                    s.classList.remove('fa-star');
                    s.classList.add('fa-star-o');
                }
            });
        });
        
        star.addEventListener('mouseover', function() {
            const rating = parseInt(this.getAttribute('data-rating'));
            
            ratingStars.forEach((s, index) => {
                if (index < rating) {
                    s.classList.remove('fa-star-o');
                    s.classList.add('fa-star');
                } else {
                    if (index >= selectedRating) {
                        s.classList.remove('fa-star');
                        s.classList.add('fa-star-o');
                    }
                }
            });
        });
        
        star.addEventListener('mouseout', function() {
            ratingStars.forEach((s, index) => {
                if (index < selectedRating) {
                    s.classList.remove('fa-star-o');
                    s.classList.add('fa-star');
                } else {
                    s.classList.remove('fa-star');
                    s.classList.add('fa-star-o');
                }
            });
        });
    });
    
    // 提交评论
    document.getElementById('submit-comment').addEventListener('click', function() {
        const commentText = document.getElementById('comment-text').value;
        
        if (!commentText.trim()) {
            alert('请输入评论内容');
            return;
        }
        
        if (selectedRating === 0) {
            alert('请给资源评分');
            return;
        }
        
        // 模拟提交评论
        console.log('提交评论:', commentText, '评分:', selectedRating);
        
        // 显示提交成功消息
        alert('评论提交成功！');
        
        // 清空评论框和评分
        document.getElementById('comment-text').value = '';
        selectedRating = 0;
        ratingStars.forEach(star => {
            star.classList.remove('fa-star');
            star.classList.add('fa-star-o');
        });
        
        // 这里应该刷新评论列表，但由于是演示，我们就不实现了
    });
    
    // 举报资源模态框
    const reportModal = document.getElementById('report-modal');
    const reportResourceBtn = document.getElementById('report-resource');
    const closeReportModalBtn = document.getElementById('close-report-modal');
    const cancelReportBtn = document.getElementById('cancel-report');
    const submitReportBtn = document.getElementById('submit-report');
    
    reportResourceBtn.addEventListener('click', function() {
        reportModal.style.display = 'flex';
        reportModal.style.opacity = '0';
        setTimeout(() => {
            reportModal.style.opacity = '1';
        }, 10);
    });
    
    function closeReportModal() {
        reportModal.style.opacity = '0';
        setTimeout(() => {
            reportModal.style.display = 'none';
        }, 300);
    }
    
    closeReportModalBtn.addEventListener('click', closeReportModal);
    cancelReportBtn.addEventListener('click', closeReportModal);
    
    // 点击模态框外部关闭
    window.addEventListener('click', function(event) {
        if (event.target === reportModal) {
            closeReportModal();
        }
    });
    
    // 提交举报
    submitReportBtn.addEventListener('click', function() {
        const reportReason = document.getElementById('report-reason').value;
        const reportDescription = document.getElementById('report-description').value;
        
        console.log('提交举报:', reportReason, reportDescription);
        
        alert('举报已提交，我们会尽快处理！');
        closeReportModal();
    });
    
    // 下载统计图表
    const ctx = document.getElementById('downloadsChart').getContext('2d');
    const downloadsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [{
                label: '下载量',
                data: [12, 19, 15, 24, 30, 25],
                borderColor: '#007bff',
                backgroundColor: 'rgba(0, 123, 255, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        drawBorder: false,
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
    
    // 分享资源功能
    const shareButtons = document.querySelectorAll('.btn-primary');
    shareButtons.forEach(button => {
        if (button.innerHTML.includes('分享资源')) {
            button.addEventListener('click', function() {
                // 模拟分享功能
                const shareLink = window.location.href;
                navigator.clipboard.writeText(shareLink).then(() => {
                    alert('分享链接已复制到剪贴板！');
                }).catch(err => {
                    console.error('无法复制链接:', err);
                    alert('分享链接：' + shareLink);
                });
            });
        }
    });
    
    // 收藏资源功能
    const bookmarkButtons = document.querySelectorAll('.btn-secondary');
    bookmarkButtons.forEach(button => {
        if (button.innerHTML.includes('收藏资源')) {
            button.addEventListener('click', function() {
                // 检查用户是否已登录
                {% if not current_user.is_authenticated %}
                    window.location.href = '{{ url_for('login') }}';
                    return;
                {% endif %}
                
                // 模拟收藏功能
                const isBookmarked = this.innerHTML.includes('fa-bookmark');
                
                if (isBookmarked) {
                    this.innerHTML = '<i class="fa fa-bookmark-o mr-2"></i>收藏资源';
                    alert('已取消收藏！');
                } else {
                    this.innerHTML = '<i class="fa fa-bookmark mr-2"></i>已收藏';
                    alert('收藏成功！');
                }
            });
        }
    });
    
    // 页面载入动画
    document.addEventListener('DOMContentLoaded', function() {
        const resourceContent = document.querySelector('.resource-content');
        const commentSection = document.querySelector('.comment-section');
        const downloadsChart = document.querySelector('.downloads-chart');
        const relatedResources = document.querySelector('.related-resources');
        
        // 淡入效果
        resourceContent.style.opacity = '0';
        resourceContent.style.transform = 'translateY(20px)';
        resourceContent.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            resourceContent.style.opacity = '1';
            resourceContent.style.transform = 'translateY(0)';
        }, 100);
        
        setTimeout(() => {
            commentSection.style.opacity = '0';
            commentSection.style.transform = 'translateY(20px)';
            commentSection.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            
            setTimeout(() => {
                commentSection.style.opacity = '1';
                commentSection.style.transform = 'translateY(0)';
            }, 100);
        }, 200);
        
        setTimeout(() => {
            downloadsChart.style.opacity = '0';
            downloadsChart.style.transform = 'translateY(20px)';
            downloadsChart.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            
            setTimeout(() => {
                downloadsChart.style.opacity = '1';
                downloadsChart.style.transform = 'translateY(0)';
            }, 100);
        }, 300);
        
        setTimeout(() => {
            relatedResources.style.opacity = '0';
            relatedResources.style.transform = 'translateY(20px)';
            relatedResources.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            
            setTimeout(() => {
                relatedResources.style.opacity = '1';
                relatedResources.style.transform = 'translateY(0)';
            }, 100);
        }, 400);
    });
</script>
{% endblock %}